<!-- 开通会员卡 -->
<template>
  <div class="open">
    <div class="huiyuan">
      <div class="open-border"></div>
    </div>
    <div class="binding">
      <p class="open-title">会员卡绑定</p>
      <div class="open-from">
        <div>
          <div class="delba">
            <i class="iconfont icon-user"></i>
            <input placeholder="姓名" v-model="name" />
          </div>
          <div class="delba">
            <i class="iconfont icon-shouji1"></i>
            <input placeholder="手机号" v-model="phone" />
          </div>
          <div class="delba">
            <i class="iconfont icon-anquan"></i>
            <input placeholder="请输入6位以上密码" v-model="password" type="password" />
          </div>
          <div class="delba">
            <i class="iconfont icon-anquan"></i>
            <input placeholder="点击绑定门店" v-model="menis" />
          </div>
        </div>
      </div>
      <div class="quedin">
        <button @click="submit">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      name: "",
      phone: "",
      password: "",
      menis: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submit() {
      var forme = {
        name: this.name,
        phone: this.phone,
        password: this.password,
        menis: this.menis
      };
      this.$store
        .dispatch("sceesrt", forme)
        .then(data => {
          console.log("请求成功" + JSON.stringify(data));
        })
        .catch(error => {
          console.log("请求失败" + error);
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.huiyuan {
  display: flex;
  justify-content: center;
}
.open-border {
  width: 600rpx;
  height: 350rpx;
  background-color: #cccccc;
  border-radius: 30rpx;
  margin-top: 30rpx;
}
.open-title {
  font-size: 30rpx;
  text-align: center;
  margin-bottom: 30rpx;
}
.binding {
  margin-top: 60rpx;
}
.open-from {
  display: flex;
  justify-content: center;
}
.delba {
  width: 500rpx;
  height: 80rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  border: 1rpx solid #ff634e;
}
.iconfont {
  font-size: 20px;
  color: #ff634e;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.delba > input {
  font-size: 30rpx;
}
.quedin > button {
  width: 400rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #aaaaaa;
  color: #ffffff;
  font-size: 34rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
}
</style>